<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>系统管理-脚本仓库</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">
<!--顶部条-->
<div style="padding: 0 7px 15px 7px" class="clearfix">
    <!--搜索输入框组-->
    <div class="input-group pull-left" style="width: 50%">
        <input id="keyword" class="form-control" type="search" placeholder="名称/内容">
        <div class="input-group-append">
            <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
        </div>
    </div>
    <!--新增按钮-->
    <button id="add" class="btn btn-info pull-right"><i class="fa fa-plus"></i> 添加脚本</button>
</div>
<!--数据展示-->
<div class="container-fluid">
    <table id="table" class="table table-sm table-hover table-bordered">
        <thead><tr>
            <th>#</th>
            <th>名称</th>
            <th style="width: 6em">类型</th>
            <th>脚本</th>
            <th>参数</th>
            <th style="width: 8em">操作</th>
        </tr></thead>
        <tbody><tr>
            <td>{{index}}</td>
            <td>{{name}}</td>
            <td><span class="badge {{typeClass}}">{{type}}</span></td>
            <td>{{text}}</td>
            <td>{{param}}</td>
            <td>
                <button class="btn btn-xs btn-outline-primary modify" data-id="{{id}}">
                    <i class="fa fa-pencil"></i> 编辑
                </button>
                <button class="btn btn-xs btn-outline-danger remove" data-id="{{id}}">
                    <i class="fa fa-times"></i> 删除
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--加载更多-->
<div id="load-more" class="text-sm-center text-primary" style="display: none;">
    <span style="cursor: pointer"><i class="fa fa-hand-o-right"></i> 点击加载更多数据</span>
</div>
<!--正在加载-->
<div id="loading" class="text-sm-center text-gray" style="display: none;">
    <span><i class="fa fa-refresh fa-spin"></i> 正在加载...</span>
</div>
<!--全部加载-->
<div id="load-all" class="text-sm-center text-success" style="display: none;">
    <i class="fa fa-info-circle"></i> 已加载全部数据
</div>
<!--加载失败-->
<div id="load-error" class="text-sm-center text-danger" style="display: none;">
    <i class="fa fa-exclamation-triangle"></i> 加载失败
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var tableCtrl = new TableCtrl(
        Url.baseService.scriptPageByKeyword,
        Url.baseService.scriptDetail,
        Url.baseService.scriptCreate,
        Url.baseService.scriptModify,
        Url.baseService.scriptRemove,
        function (template, record, index) {
            var typeClass = "bg-danger";
            switch (record.type) {
                case "BASH": typeClass = "bg-info"; break;
                case "SQL": typeClass = "bg-warning"; break;
                default: typeClass = "bg-danger"; break;
            }
            return template
                .replace(new RegExp("{{index}}", "gm"), index + 1)
                .replace(new RegExp("{{id}}", "gm"), record.id)
                .replace(new RegExp("{{name}}", "gm"), record.name)
                .replace(new RegExp("{{typeClass}}", "gm"), typeClass)
                .replace(new RegExp("{{type}}", "gm"), record.type)
                .replace(new RegExp("{{text}}", "gm"), (record.text ? record.text.length : 0) + " 字符")
                .replace(new RegExp("{{param}}", "gm"), (record.args ? record.args.length : 0) + " 个")
        },
    );
    tableCtrl.showCreate = function () {
        var name = "创建脚本";
        var url = "cloud/html/script-detail.html?action=create";
        parent.window.frameCtrl.windowCtrl.open("script-create", name, url);
    };
    tableCtrl.showModify = function (id) {
        let record = this.getById(id);
        var name = "修改脚本-" + record.name;
        var url = "cloud/html/script-detail.html?action=modify&id=" + id;
        parent.window.frameCtrl.windowCtrl.open("script-modify-" + id, name, url);
    };
    tableCtrl.showDetail = function (id) {
        let record = this.getById(id);
        var name = "脚本详情-" + record.name;
        var url = "cloud/html/script-detail.html?action=detail&id=" + id;
        parent.window.frameCtrl.windowCtrl.open("script-dettail-" + id, name, url);
    };

    tableCtrl.getTemplate();
    tableCtrl.getRecords();
    tableCtrl.bindEvent();

    var listener = function (event) {
        if (event.type === "SCRIPT_REFRESH") {
            $("#search").click();
        }
    };
    listener.owner = window.location.href;
    parent.window.frameCtrl.websockerCtrl.eventListener.push(listener);
</script>

</body>
</html>